<template>
	<view class="contentPlc">
		<!-- 头部 -->
		<view class="topSelect">
			<!-- 下拉框 -->
			<uni-data-select
			 placeholder="请选择机器人"
				v-model="value"
				:localdata="range"
				@change="change"
				class="SelectBox"
			>
			</uni-data-select>
			<!-- 切换按钮 -->
			<view class="Btn">
				<view class="robotBtn" @click="robotBtnClick" :class="{ active: isRobotActive }">
					机器人
				</view>
				<view class="plcBtn" @click="plcBtnClick" :class="{ active: isPlcActive }">
					PLC
				</view>
			</view>
		</view>
		<!-- 标题 -->
		<view class="title">
			电器参数
		</view>
		<!-- 内容区 -->
		<view class="dqcs">
			<ul class="dqcsUl">
				<li class="dqcsLi1">提升机上到位</li>
				<li class="dqcsLi2">{{tsjssdw1}}</li>
			</ul>
			<ul class="dqcsUl">
				<li class="dqcsLi1">提升机下到位</li>
				<li class="dqcsLi2">{{tsjxjdw2}}</li>
			</ul>
			<ul class="dqcsUl">
				<li class="dqcsLi1">机器人到位信号1</li>
				<li class="dqcsLi2">{{tsjjqrdwxh1}}</li>
			</ul>
			<ul class="dqcsUl">
				<li class="dqcsLi1">机器人到位信号2</li>
				<li class="dqcsLi2">{{tsjjqrdwxh2}}</li>
			</ul>
			<ul class="dqcsUl">
				<li class="dqcsLi1">电动门开到位</li>
				<li class="dqcsLi2">{{ddmkdw}}</li>
			</ul>
			<ul class="dqcsUl">
				<li class="dqcsLi1">电动门关到位</li>
				<li class="dqcsLi2">{{ddmgdw}}</li>
			</ul>
			<ul class="dqcsUl">
				<li class="dqcsLi1">1#AP电源</li>
				<li class="dqcsLi2">{{dy1}}</li>
			</ul>
			<ul class="dqcsUl">
				<li class="dqcsLi1">2#AP电源</li>
				<li class="dqcsLi2">{{dy2}}</li>
			</ul>
		</view>
	</view>
</template>

<script>
	import {equipmentLion} from '@/api/equipment/equipment.js'
	import {plcData} from '@/api/camera/camera.js'
	import cookie from '../../../cookie.js'
	
	export default{
		data(){
			return{
				isRobotActive:false,
				isPlcActive: true,
				token:cookie.get('access_token'),
				secretKey:cookie.get('secretKey'),
				//机器人选择
				value:cookie.get('robotid'),
				text:cookie.get('robot_name'),
				range:[
					{value:"", text:""}
				],
				//被选中机器人的id
				selectedRobotId:cookie.get('robotid'),
				//机器人名称
				robot_name:cookie.get('robot_name'),
				//被选中的机器人
				ranges:{},
				
				//plc实时数据
				tsjssdw1:'无'  ,//提升机上到位
				tsjxjdw2:'无' , //提升机下到位
				tsjjqrdwxh1:'无', //机器人到位信号1
				tsjjqrdwxh2:'无', //机器人到位信号2
				ddmkdw:'无', //电动门开到位
				ddmgdw:'无', //电动门关到位
				dy1:'无' , //1#AP电源
				dy2:'无'  //2#AP电源
			}
		},
		onLoad() {
			this.robotList() //机器人切换
		},
		mounted() {
			this.plcRealTime() //实时plc数据
		},
		methods:{
			//获取plc实时数据
			plcRealTime(){
				if(this.selectedRobotId == undefined){
					this.tsjssdw1 = '无'
					this.tsjxjdw2 = '无'
					this.tsjjqrdwxh1 = '无'
					this.tsjjqrdwxh2 = '无'
					this.ddmkdw = '无'
					this.ddmgdw = '无'
					this.dy1 = '无'
					this.dy2 = '无'
				}else{
					plcData(this.selectedRobotId).then(Response =>{
						if(typeof Response.data != 'undefined' && Response.data != null){
							this.tsjssdw1 = Response.data.tsjssdw1 == ''?  Response.data.tsjssdw1: '无' //提升机上到位
							this.tsjxjdw2 = Response.data.tsjxjdw2 == ''? Response.data.tsjxjdw2 : '无' //提升机下到位
							this.tsjjqrdwxh1 = Response.data.tsjjqrdwxh1 == ''? Response.data.tsjjqrdwxh1 : '无' //机器人到位信号1
							this.tsjjqrdwxh2 = Response.data.tsjjqrdwxh2 == ''? Response.data.tsjjqrdwxh2 : '无'//机器人到位信号2
							this.ddmkdw = Response.data.ddmkdw == ''? Response.data.ddmkdw : '无'  //电动门开到位
							this.ddmgdw = Response.data.ddmgdw == ''? Response.data.ddmgdw : '无' //电动门关到位
							this.dy1 = Response.data.dy1 == ''? Response.data.dy1 : '无' //1#AP电源
							this.dy2 = Response.data.dy2 == ''? Response.data.dy2 : '无' //2#AP电源
						}else{
							this.tsjssdw1 = '无'
							this.tsjxjdw2 = '无'
							this.tsjjqrdwxh1 = '无'
							this.tsjjqrdwxh2 = '无'
							this.ddmkdw = '无'
							this.ddmgdw = '无'
							this.dy1 = '无'
							this.dy2 = '无'
						}
					})
				}
			},
			//获取机器人信息
			robotList(){
				equipmentLion(this.token,this.secretKey).then(Response=>{
					Response.rows.map(item =>{
					  this.range = Response.rows.map(({ id, robot_name }) => ({ value: id, text: robot_name }));
					})
				})
			},
			change(e) {
				localStorage.removeItem('robotid')
				localStorage.removeItem('robot_name')
				//保存选中机器人的id
				this.ranges = this.range.find(item => item.value === e)
				cookie.set('robotid',this.ranges.value)
				cookie.set('robot_name',this.ranges.text)
				this.selectedRobotId = this.ranges.value
				this.robot_name = this.ranges.text
				
				this.plcRealTime() //实时plc数据
			},
			//机器人页面按钮事件
			robotBtnClick(){
				this.isRobotActive = true;
				this.isPlcActive = false;
				uni.switchTab({
					url:'/pages/camera/index'
				})
			},
			//plc页面按钮事件
			plcBtnClick(){
				this.isRobotActive = false;
				this.isPlcActive = true;
			},
		}
	}
</script>

<style lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.contentPlc{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.topSelect{
		width: 710rpx;
		height: 65rpx;
		margin-top: 16rpx;
		display: flex;
		align-items: center;
	}
	.SelectBox{
		width: 411rpx;
		height: 65rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}
	.SelectBox /deep/ .uni-icons{
		 font-size: 0px !important;
	}
	.Btn{
		 width: 185rpx;
		 height: 48rpx;
		 border: 1rpx solid #0F174F;
		 border-radius: 50rpx;
		 display: flex;
		 justify-content: space-around;
		 align-items: center;
		 color: #0F174F;
		 font-size: 26rpx;
		 font-weight: 500;
		 font-family: Source Han Sans CN;
		 background-color: #f5f5f5;
		 margin-left: 104rpx;
	}
	.robotBtn{
		 width: 119rpx;
		 height: 46rpx;
		 border-radius: 50rpx;
		 display: flex;
		 justify-content: center;
		 align-items: center;
	}
	.plcBtn{
		 width: 119rpx;
		 height: 46rpx;
		 border-radius: 50rpx;
		 display: flex;
		 justify-content: center;
		 align-items: center;
	}
	
		.active{
			color:#f5f5f5;
			background-color: #0F174F;
		}
		.title{
			width: 710rpx;
			font-size: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #0F174F;
			margin-top: 26rpx;
		}
		.dqcs{
			width: 710rpx;
			height: 571rpx;		
			background: #FFFFFF;
			box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
			border-radius: 10rpx;
			margin-top: 13rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.dqcsUl{
			width:380rpx;
			height:41rpx;
			list-style-type: none;
			margin-bottom: 19rpx;
			display: flex;
		}
		.dqcsLi1{
			width: 190rpx;
			height: 41rpx;
			font-size: 22rpx;
			font-family: Source Han Sans CN;
			color: #333333;
			font-weight: 500;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}
		.dqcsLi2{
			width: 130rpx;
			height: 41rpx;
			background: #F1F4FE;
			box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
			border-radius: 10rpx;
			font-size: 20rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #333333;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 38rpx;
		}
</style>